<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>功能管理</title>
    <link rel="stylesheet" th:href="@{/statics/css/zTreeStyle/zTreeStyle.css}" type="text/css"></link>
    <style type="text/css">
        .divAll {
            display: inline-block;
        }

        .parentDiv {
            width:150px;
            height: 150px;
            border: 1px black solid;
            overflow: auto;
            display: none;
            position: relative;
            left: 70px;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div class="divAll" style="width: 200px;height: 350px;border: 1px black solid;overflow-y: scroll;overflow-x: scroll; ">
        <ul id="functionTree" class="ztree"></ul>
        <input type="button" id="refreshBtn" value="刷新"/>
    </div>
    <div class="divAll"  style="width: 400px;height: 350px;border: 1px black solid;overflow-y: scroll;overflow-x: scroll; ">
        详情：
        <form>
            <p>
                功能code：<input type="text" name="functionCode" id="functionCode"/>
            </p>
            <p>
                功能名称：<input type="text" name="functionName" id="functionName"/>
            </p>
            <p>
                功能URL：<input type="text" name="funcUrl" id="funcUrl"/>
            </p>
            <p>
                父功能：<input type="text" name="parentName" id="parentName"/>
                <div id="parentDiv" class="parentDiv">
                    <ul id="functionTree2" class="ztree"></ul>
                </div>
                <input type="hidden" name="parentId" id="parentId" value="0"/>
            </p>
            <p>
                功能Level：<input type="text" name="level" id="level"/>
            </p>
            <input type="hidden" name="id" id="fid"/>
            <p>
                <input type="button" id="addBtn" value="添加"/>
                <input type="button" id="editBtn" value="修改"/>
            </p>
        </form>
    </div>

    <script type="text/javascript" th:src="@{/statics/js/zTree/jquery-1.4.4.min.js}"></script>
    <script type="text/javascript" th:src="@{/statics/js/zTree/jquery.ztree.core.js}"></script>
    <SCRIPT type="text/javascript" th:inline="javascript">
        var setting = {
            async: {
                enable: true,
                url:"getFunctionList",
                autoParam:["id", "pid", "name"],
                dataFilter: filter
            },
            data:{
                simpleData:{
                    enable: true,
                    idKey:'id',
                    pIdKey:'pid',
                    rootPId: 0
                }
            },
            callback: {
                beforeClick: beforeClick,
                onClick: onClick
            },
            view:{
                showIcon: false
            }
        };

        function filter(treeId, parentNode, childNodes) {
            return childNodes;
        }

        var className = "dark";
        function beforeClick(treeId, treeNode, clickFlag) {
            className = (className === "dark" ? "":"dark");
            return (treeNode.click != false);
        }

        //点击功能将该功能详情显示在右侧div中
        function onClick(event, treeId, treeNode, clickFlag) {
            var fid = treeNode.id ;
            var fname = treeNode.name ;


            $.ajax({
                type: "post",
                url: "getFunctionInfo",
                data: "fid="+fid,
                dataType: "json",
                success: function(result) {
                    $("#functionCode").val(result.functionCode) ;
                    $("#functionName").val(result.functionName) ;
                    $("#funcUrl").val(result.funcUrl) ;
                    $("#parentId").val(result.parentId) ;
                    $("#parentName").val(treeNode.getParentNode()==null?"":treeNode.getParentNode().name) ;
                    $("#level").val(result.level) ;
                    $("#fid").val(result.id) ;
                }
            })
        }


        //用作选择父级的菜单设置
        var setting2 = {
            async: {
                enable: true,
                url:"getFunctionList",
                autoParam:["id", "pid", "name"],
                dataFilter: filter
            },
            data:{
                simpleData:{
                    enable: true,
                    idKey:'id',
                    pIdKey:'pid',
                    rootPId: 0
                }
            },
            callback: {
                beforeClick: beforeClick,
                onClick: onClick2
            },
            view:{
                showIcon: false
            }
        };

        function onClick2(event, treeId, treeNode, clickFlag) {
            var fid = treeNode.id ;
            var fname = treeNode.name ;

            $("#parentId").val(fid) ;
            $("#parentName").val(fname) ;
        }

        $(document).ready(function(){
            zTreeObj = $.fn.zTree.init($("#functionTree"), setting, null);
            zTreeObj2 = $.fn.zTree.init($("#functionTree2"), setting2, null); //为选择父级准备

            $("#refreshBtn").click(function () {
                $.fn.zTree.init($("#functionTree"), setting, null);
                $.fn.zTree.init($("#functionTree2"), setting2, null);
            })

            //父功能获取焦点，显示树形菜单
            $("#parentName").focus(function () {
                $("#parentDiv").show() ;
            }).blur(function () {
                //失去焦点判断是否选择父级，如果没有选择 ，则父级为0（顶级）
                var value = $(this).val() ;
                if(value == "" || value.length == 0) {
                    $("#parentId").val(0) ;
                }
            })

            //鼠标移出树形菜单则关闭
            $("#parentDiv").mouseout(function(){
                $("#parentDiv").hide() ;
                $("#parentName").blur() ;
            }).mouseover(function () {
                $("#parentDiv").show() ;
            });


            $("#addBtn").click(function () {
                var fcode = $("#functionCode").val() ;
                var fname = $("#functionName").val() ;
                var furl = $("#funcUrl").val() ;
                var fpid = $("#parentId").val() ;
                var flevel = $("#level").val() ;

                $.ajax({
                    type: "post",
                    url: "functionAdd",
                    data: {"functionCode":fcode,"functionName":fname,"funcUrl":furl,"parentId":fpid,"level":flevel},
                    dataType: "json",
                    success: function(result) {
                        if(result == 1) {
                            alert("添加成功") ;
                        }
                        else {
                            alert("添加失败") ;
                        }
                    }
                })
            })


            $("#editBtn").click(function () {
                var fcode = $("#functionCode").val() ;
                var fname = $("#functionName").val() ;
                var furl = $("#funcUrl").val() ;
                var fpid = $("#parentId").val() ;
                var flevel = $("#level").val() ;
                var fid = $("#fid").val() ;

                $.ajax({
                    type: "post",
                    url: "functionEdit",
                    data: {"id":fid,"functionCode":fcode,"functionName":fname,"funcUrl":furl,"parentId":fpid,"level":flevel},
                    dataType: "json",
                    success: function(result) {
                        if(result == 1) {
                            alert("修改成功") ;
                        }
                        else {
                            alert("修改失败") ;
                        }
                    }
                })
            })

        });


    </SCRIPT>
</body>
</html>